<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            display: flex;
        }
    </style>
</head>

<body>
    <section>
        <div>
            <img src="" alt="">
            <div></div>
        </div>
    </section>
    <button class="up">上一页</button><button class="down">下一页</button><span></span>
</body>

</html>
<script src="./promise封装ajax.js"></script>
<script>
    var yeshu = 1
    const set = document.querySelector('section')
    const up = document.querySelector('.up')
    const down = document.querySelector('.down')
    const span = document.querySelector('span')
    //当页数为1的时候是默认显示，并且上一页是灰色不可按  （但不生效）
    if (yeshu == 1) {
        ajax('get', 'https://yantianfeng.com/api/emotion', { page: 1, count: 10 }).then((data) => {
            var biaoqing = data.emotions.map((item, index) => {
                return `        
                <div>
                    <img src="${item.url}" alt="">
                    <div>${item.title}</div>
                </div>`
            }).join('')
            set.innerHTML = biaoqing
            span.innerHTML = yeshu + '/' + '4'
            up.disabled = true
        })
    }

    //点击上一页使页面自减，并当页面为1的时候不得点击    （第二步未实现，试过if判断 但是失效  不知具体原因）
    up.onclick = function () {
        if (yeshu < 2) {
            yeshu = 2

        }
        ajax('get', 'https://yantianfeng.com/api/emotion', { page: --yeshu, count: 10 }).then((data) => {

            // console.log(data);
            // console.log(yeshu);
            biaoqing = data.emotions.map((item, index) => {
                return `        
                <div>
                    <img src="${item.url}" alt="">
                    <div>${item.title}</div>
                </div>`
            }).join('')
            set.innerHTML = biaoqing
            span.innerHTML = yeshu + '/' + '4'
        })
        if(yeshu ==1){
            up.disabled = true
        }
        down.disabled = false
    }
    //页面为4时时按钮并且不可点击（未实现）
    down.onclick = function () {
        if (yeshu > 3) {
            yeshu = 3
        }
        up.disabled = false
        ajax('get', 'https://yantianfeng.com/api/emotion', { page: ++yeshu, count: 10 }).then((data) => {
            // console.log(data);
            // console.log(yeshu);
            var biaoqing = data.emotions.map((item, index) => {
                return `        
                <div>
                    <img src="${item.url}" alt="">
                    <div>${item.title}</div>
                </div>`
            }).join('')
            set.innerHTML = biaoqing
            span.innerHTML = yeshu + '/' + '4'
        })
        if (yeshu == 4) {
        down.disabled = true
    } 
    }
</script>